<template>
  <ContentWrap>
    <el-card class="box-card !border-none" shadow="never">
      <el-form ref="searchFormRef" :model="tableData.searchParam" inline>
        <el-form-item label="关键词" prop="keyword">
          <el-input
            v-model="tableData.searchParam.keyword"
            class="!w-240px"
            placeholder="请输入关键词"
            clearable
            @keyup="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            class="w-[280px]"
            v-model="tableData.searchParam.status"
            clearable
            placeholder="请选择状态"
          >
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="创建时间">
          <el-date-picker
            v-model="tableData.searchParam.createTime"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>
          <el-button
            v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']"
            plain
            type="primary"
            @click="openForm('create')"
          >
            <Icon class="mr-5px" icon="ep:plus" />
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <div class="mt-[5px]">
        <el-table :data="tableData.list" size="large" v-loading="tableData.loading">
          <template #empty>
            <span>{{ !tableData.loading ? '没有相关数据' : '' }}</span>
          </template>
          <el-table-column label="用户信息" min-width="120">
            <template #default="{ row }">
              <div class="flex flex-col items-start justify-start">
                <img
                  class="w-[50px] h-[50px] mr-[10px] border border-solid border-gray-50"
                  :src="row.user?.avatar || '/avatar.png'"
                  alt=""
                />
                <span>{{ row.user?.nickname || '匿名' }}</span>
                <span>{{ row.user?.mobile || '未绑定手机号' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="金额" min-width="100">
            <template #default="{ row }">
              <span class="text-orange-500">¥{{ fenToYuan(row.price) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" min-width="100">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            min-width="170"
          />
          <el-table-column
            v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']"
            label="操作"
            min-width="100"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <el-button link type="primary" @click="openForm('update', scope.row.id)">
                编辑
              </el-button>
              <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          v-model:limit="tableData.searchParam.pageSize"
          v-model:page="tableData.searchParam.pageNo"
          :total="tableData.total"
          @pagination="loadTableData"
        />
      </div>
    </el-card>
  </ContentWrap>

  <DemoForm ref="formRef" @success="loadTableData" />
</template>

<script lang="ts" setup name="Demo">
import * as DemoApi from '@/api/demo'
import { FormInstance } from 'element-plus'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { fenToYuan } from '@/utils'
import { dateFormatter } from '@/utils/formatTime'
import DemoForm from './DemoForm.vue'

const { t } = useI18n()
const message = useMessage()

const tableData = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  list: [],
  searchParam: {
    pageNo: 1,
    pageSize: 10,
    keyword: '',
    status: '',
    createTime: []
  }
})

const loadTableData = () => {
  tableData.loading = true
  DemoApi.getPage({
    ...tableData.searchParam
  })
    .then((res: any) => {
      tableData.loading = false
      tableData.list = res.list
      tableData.total = res.total
    })
    .catch(() => {
      tableData.loading = false
    })
}

const searchFormRef = ref<FormInstance>()

const handleQuery = () => {
  tableData.searchParam.pageNo = 1
  loadTableData()
}

const resetQuery = () => {
  searchFormRef.value?.resetFields()
  tableData.searchParam = {
    pageNo: 1,
    pageSize: 10,
    status: '',
    createTime: []
  }
  handleQuery()
}

const formRef = ref()
const openForm = (type: string, id?: number | string) => {
  formRef.value.open(type, id)
}

const handleDelete = async (id: number | string) => {
  try {
    await message.delConfirm()
    await DemoApi.deleteById(id)
    message.success(t('common.delSuccess'))
    loadTableData()
  } catch {}
}

onMounted(() => {
  handleQuery()
})
</script>
